<template>
	<view class="my_app">
		<Head :bg="'tran'">会员服务</Head>
		<view class="box_1">
			<view class="box_info">
				<view class="box_top">
					<view class="avatar_box">
						<image :src="photo" alt="photo"></image>
					</view>
					<view class="name">{{ fullname }}</view>
					<view class="point">我的{{ points_byname }}：{{ points }}</view>
					<view class="btn_group">
						<a class="point_btn" href="#task">获取{{ points_byname }}</a>
						<view class="point_btn" @click="handleClick('/member/personal/points_log')">收支明细</view>
						<view class="clear"></view>
					</view>
					<view class="sign_box" @click="handlerSignin">每日签到</view>
				</view>
				<view class="box_bottom" @click="handleClick('/member/order/list')">
					服务订单
					<view class="right_txt">查看全部订单</view>
				</view>
			</view>
		</view>
		<view class="self_box_head">增值服务</view>
		<view class="box_2">
			<view class="item">
				<view class="tx1">简历置顶</view>
				<view class="tx2">提升5倍曝光量</view>
				<view class="tx3">
					<u-button :custom-style="{padding:'0 30rpx'}" type="primary" size="medium" shape="circle"
						@click="handlerJumpService('/member/order/add/stick','stick')">开通</u-button>
				</view>
			</view>
			<view class="item right">
				<view class="tx1">醒目标签</view>
				<view class="tx2">是金子就要发光</view>
				<view class="tx3">
					<u-button :custom-style="{padding:'0 30rpx'}" type="primary" size="medium" shape="circle"
						@click="handlerJumpService('/member/order/add/tag','tag')">开通</u-button>
				</view>
			</view>
			<view class="clear"></view>
		</view>
		<view class="self_box_head" id="task">我的任务</view>
		<view class="box_3">
			<view class="item" v-for="(item, index) in task" :key="index">
				<view class="ico" :class="item.alias"></view>
				<view class="tx1">{{ item.name }}</view>
				<view class="tx2">{{ points_byname }}：{{ item.points }}</view>
				<u-button class="btn" plain :custom-style="{padding:'0 30rpx'}" type="primary" shape="circle"
					size="medium" v-if="item.is_done === 0" @click="handlerJump(item)">
					去完成
				</u-button>
				<view class="down" v-else></view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import handlerHttpError from '@/utils/error'
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'PersonalServiceIndex',
		data() {
			return {
				points_byname: '',
				points: 0,
				photo: '',
				fullname: '',
				task: [],
				empty_resume: false
			}
		},
		created() {
			this.points_byname = this.$store.state.config.points_byname
			this.fetchData()
		},
		computed: {
			basic() {
				return this.$store.state.resume.basic
			}
		},
		methods: {
			// 初始化数据
			initInfo() {
				http
					.get(api.editResume)
					.then(res => {
						if (res.data.data === null) {
							this.empty_resume = true
							// 更新基本资料
							this.$store.dispatch('setBasicInfo', null)
						} else {
							// 更新基本资料
							this.$store.dispatch('setBasicInfo', res.data.data.basic)
							this.empty_resume = false
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			handlerJumpService(path, type) {
				if (this.empty_resume === true) {
					handlerHttpError({
						code: 50007,
						message: '请先添加一份简历'
					})
				} else {
					if (type == 'stick' && this.basic.stick === 1) {
						this.$refs.uTips.show({
							title: '该简历已经在推广状态，不能重复推广',
							type: 'error'
						})
						return false
					}
					if (type == 'tag' && this.basic.service_tag !== '') {
						this.$refs.uTips.show({
							title: '该简历已经在推广状态，不能重复推广',
							type: 'error'
						})
						return false
					}
					uni.navigateTo({
						url: path
					})
				}
			},
			fetchData() {
				http
					.get(api.member_points, {})
					.then(res => {
						const {
							points,
							photo,
							fullname,
							task
						} = {
							...res.data.data
						}
						this.points = points
						this.photo = photo
						this.fullname = fullname
						this.task = task
					})
					.catch(() => {})
			},
			handleClick(path) {
				uni.navigateTo({
					url: path
				})
			},
			handlerJump(item) {
				switch (item.alias) {
					case 'bind_weixin':
					case 'bind_qq':
					case 'bind_sina':
						this.handleClick('/member/personal/account')
						break
					case 'upload_photo':
					case 'percent60':
					case 'percent90':
						this.handleClick('/member/personal/resume')
						break
					case 'refresh_resume':
						this.handleClick('/member/personal/index')
						break
					case 'apply_job':
					case 'report_job':
						this.handleClick('/joblist')
						break
					case 'sign_in':
						this.handlerSignin()
						break
					default:
						break
				}
			},
			handlerSignin() {
				http
					.post(api.member_signin, {})
					.then(res => {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success'
						})
						this.task.forEach(element => {
							if (element.alias === 'sign_in') {
								element.is_done = 1
							}
						})
					})
					.catch(() => {})
			},
			goBack() {
				window.history.length > 1 ? uni.navigateBack({
					delta: 1
				}) : uni.navigateTo({
					url: '/'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_3 {
		.item {
			.ico {
				&.reg {
					background-image: url($ImgUrl + "task_ico_account.png");
					background-position: 0 0;
					background-repeat: no-repeat;
					background-size: 66rpx;
				}

				&.report_job {
					background-image: url($ImgUrl + "task_ico_jb.png");
					background-position: 0 0;
					background-repeat: no-repeat;
					background-size: 66rpx;
				}

				&.apply_job {
					background-image: url($ImgUrl + "task_ico_td_resume.png");
					background-position: 0 0;
					background-repeat: no-repeat;
					background-size: 66rpx;
				}

				&.percent90 {
					background-image: url($ImgUrl + "task_ico_percent_90.png");
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.percent60 {
					background-image: url($ImgUrl + "task_ico_percent_60.png");
					background-position: 0 0;
					background-repeat: no-repeat;
					background-size: 66rpx;
				}

				&.upload_photo {
					background-image: url($ImgUrl + "task_ico_avatar.png");
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.refresh_resume {
					background-image: url($ImgUrl + "task_ico_refresh.png");
					background-size: 66rpx;
					background-repeat: no-repeat;
					background-position: 0 0;
				}

				&.bind_sina {
					background-image: url($ImgUrl + "task_ico_bdwb.png");
					background-size: 66rpx;
					background-repeat: no-repeat;
					background-position: 0 0;
				}

				&.bind_qq {
					background-image: url($ImgUrl + "task_ico_bdqq.png");
					background-size: 66rpx;
					background-repeat: no-repeat;
					background-position: 0 0;
				}

				&.bind_weixin {
					background-image: url($ImgUrl + "task_ico_bdwx.png");
					background-size: 66rpx;
					background-repeat: no-repeat;
					background-position: 0 0;
				}

				&.sign_in {
					background-image: url($ImgUrl + "task_ico_sign.png");
					background-size: 66rpx;
					background-repeat: no-repeat;
					background-position: 0 0;
				}

				position: absolute;
				left: 24rpx;
				top: 50%;
				transform: translate(0, -50%);
				width: 66rpx;
				height: 66rpx;
			}

			.down {
				position: absolute;
				right: 36rpx;
				top: 50%;
				transform: translate(0, -50%);
				width: 97rpx;
				height: 80rpx;
				background-image: url($ImgUrl + "task_ico_down.png");
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 97rpx 80rpx;
			}

			.btn {
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translate(0, -50%);
				padding-left: 30rpx;
				padding-right: 30rpx;
			}

			.tx2 {
				font-size: 24rpx;
				color: #666666;
				width: 400rpx;
				overflow: hidden;
				white-space: nowrap;
				padding: 14rpx 0 20rpx;
				text-overflow: ellipsis;
			}

			.tx1 {
				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
				width: 400rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-top: 22rpx;
			}

			position: relative;
			border: 2rpx solid #f8f8f8;
			border-radius: 10rpx;
			padding-left: 124rpx;

			&:not(:last-child) {
				margin-bottom: 26rpx;
			}
		}

		margin-bottom: 20rpx;
		padding: 0 30rpx;
	}

	.box_2 {
		.item {
			.tx2 {
				font-size: 24rpx;
				color: #999999;
				padding: 18rpx 0 26rpx;
			}

			.tx1 {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
			}

			float: left;
			width: 320rpx;
			border-radius: 8rpx;
			box-shadow: 0 0 10rpx #c2c2c2;
			text-align: center;
			padding: 126rpx 0 44rpx;
			background-image: url($ImgUrl + "service_top_ico.png");
			background-repeat: no-repeat;
			background-position: center 54rpx;
			background-size: 49rpx;

			&.right {
				background-image: url($ImgUrl + "service_tag_ico.png");
				background-repeat: no-repeat;
				background-position: center 54rpx;
				float: right;
				background-size: 52rpx 51rpx;
			}
		}

		margin-bottom: 20rpx;
		padding: 0 30rpx;
	}

	.self_box_head {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
		padding: 25rpx 30rpx;
	}

	.box_1 {
		.box_info {
			.box_bottom {
				.right_txt {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translate(0, -50%);
					padding-right: 34rpx;
					font-size: 24rpx;
					color: #c9c9c9;
				}

				&::after {
					position: absolute;
					right: 34rpx;
					top: 46rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #999999;
					border-right: 2rpx solid #999999;
					transform: rotate(45deg);
					content: " ";
				}

				font-size: 28rpx;
				color: #333333;
				padding: 32rpx 0 32rpx 58rpx;
				border-top: 2rpx solid #f3f3f3;
				background-image: url($ImgUrl + "serve_index_tb_bg.png");
				background-repeat: no-repeat;
				background-position: 26rpx center;
				background-size: 22rpx 26rpx;
				position: relative;
			}

			.box_top {
				.sign_box {
					&::after {
						content: " ";
						position: absolute;
						right: 0;
						bottom: -11rpx;
						width: 17rpx;
						height: 11rpx;
						background-image: url($ImgUrl + "serve_index_sign_bg.png");
						background-repeat: no-repeat;
						background-position: 0 0;
						z-index: 2;
						background-size: 17rpx 11rpx;
					}

					position: absolute;
					right: -17rpx;
					top: 72rpx;
					font-size: 24rpx;
					color: #ffffff;
					padding: 13rpx 24rpx 13rpx 30rpx;
					background: linear-gradient(to right, #ffa140, #fa7445);
					border-radius: 60rpx 0 0 60rpx;
					z-index: 3;
				}

				.avatar_box {
					position: absolute;
					left: 44rpx;
					top: 60rpx;
					overflow: hidden;
					width: 92rpx;
					height: 92rpx;
					border-radius: 100%;

					image {
						width: 92rpx;
						height: 92rpx;
						border-radius: 100%;
						border: 2rpx solid #a0c3f8;
					}
				}

				.btn_group {
					.point_btn {
						float: left;
						margin-right: 40rpx;
						font-size: 26rpx;
						color: #fa7445;
						font-weight: bold;
						padding: 8rpx 24rpx;
						border: 2rpx solid #ffd1a1;
						border-radius: 52rpx;
					}
				}

				.point {
					margin-bottom: 30rpx;
					font-size: 28rpx;
					color: #666666;
				}

				.name {
					margin-bottom: 16rpx;
					font-size: 36rpx;
					color: #333333;
					font-weight: bold;
				}

				width: 100%;
				padding:46rpx 0 30rpx 174rpx;
			}

			position: relative;
			width: 680rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			margin: 0 auto;
			box-shadow: 0 2rpx 10rpx #c2c2c2;
		}

		position: relative;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.my_app {
		background-image: url($ImgUrl + "serve_index_top_bg.png");
		background-repeat: no-repeat;
		background-position: center 0;
		background-size: 750rpx 382rpx;
	}
</style>
